<template>
  <!-- 最顶层  detail-content  开始  -->
  <div style="background: #F5F5F7;">
    <!-- 产品信息顶部 -->
    <BaseHeader></BaseHeader>

    <!-- 搜索分词 
    <div class="shop-item-path" >
      <div class="shop-nav-container">
        <Breadcrumb>
          <BreadcrumbItem to="/">首页</BreadcrumbItem>
          <BreadcrumbItem v-for="(item, index) in categoryBar" :to="goGoodsList(index)" target="_blank" :key="index">
            {{ item.name }}
          </BreadcrumbItem>
        </Breadcrumb>
        <div class="store-collect" v-if="!takeDownSale">
          <span class="mr_10" v-if="goodsMsg.data">
            <router-link :to="'Merchant?id=' + goodsMsg.data.storeId">
            {{ goodsMsg.data.storeName }}
            </router-link>
          </span>
          <span @click="collect">
            <Icon type="ios-heart" :color="storeCollected ? '#ed3f14' : '#666'" />
            {{ storeCollected? "已收藏店铺": "收藏店铺" }}
          </span>
          <span class="ml_10" @click="IMService(goodsMsg.data.storeId,goodsMsg.data.goodsId,goodsMsg.data.id)">联系客服</span>
        </div>
      </div>
    </div>-->

    <!-- 产品信息展示 -->
    <ShowGoods v-if="goodsMsg.success" :detail="goodsMsg"  @handleClickSku="targetClickSku" ></ShowGoods>

    <!-- 产品详细展示 -->
    <ShowGoodsDetail v-if="goodsMsg.success" :detail="goodsMsg"></ShowGoodsDetail>

    <!-- 无产品 
    <empty _Title='当前产品已下架' v-if="takeDownSale">
      <div class="sale-btn">
        <Button size="small" class="mr_10" @click="target('/')">返回首页</Button>
        <Button size="small" @click="target('goodsList')">返回产品列表</Button>
      </div>
    </empty>-->

    <BaseFooter></BaseFooter>

    <Spin size="large" fix v-if="isLoading"></Spin>

  </div>  
</template>

<script>
  import Search from "@/components/Search";
  import ShowGoods from "@/components/cruise/ShowGoods";
  import ShowGoodsDetail from "@/components/cruise/ShowGoodsDetail";
  // import empty from "@/components/empty/Main";
  import common from '@/plugins/common'
  import storage from "@/plugins/storage.js";
  import svg from '@/assets/font/symbol/iconfont.js'
  import { goodsSkuDetail, goodsCruise } from "@/api/goods";

  /**
   * 产品展示加载组件，取数据
   */
  export default {
    name: "GoodCruise",
    filters: { trustHtml(value) {} },
    components: {
      Search,
      ShowGoods,
      ShowGoodsDetail,
      //empty
    },
    data() {
      return {
        goodsMsg: {},          // 产品信息
        isLoading: false,      // 加载状态
        categoryBar: [],       // 分类
        storeCollected: false, // 产品收藏
        storeMsg: {},          // 店铺信息
        takeDownSale:false,    // 是否下架
        userInfo: {},
      }
    },
    created() {
      //uni.setNavigationBarTitle({ title: ' ' })
      if (storage.getItem("userInfo")) {
        this.userInfo = JSON.parse(storage.getItem("userInfo"));
      }
      this.initData()
    },
    // onReady() {
    //   //计算锚点高度，页面数据是ajax加载时，请把此行放在数据渲染完成事件中执行以保证高度计算正确
    //   this.calcAnchor() 
    // },
    // onPageScroll(e) {
    //   //锚点切换
    //   //this.selectAnchor = e.scrollTop >= this.anchorlist[2].top ? 2 : e.scrollTop >= this.anchorlist[1].top ? 1:0;
    //   this.selectAnchor = 1
    //   //导航栏渐变
    //   let tmpY = 375
    //   e.scrollTop = e.scrollTop > tmpY ? 375 : e.scrollTop
    //   this.afterHeaderOpacity = e.scrollTop * (1 / tmpY)
    //   this.beforeHeaderOpacity = 1 - this.afterHeaderOpacity
    //   //切换层级
    //   this.beforeHeaderzIndex = e.scrollTop > 0 ? 10 : 11
    //   this.afterHeaderzIndex = e.scrollTop > 0 ? 11 : 10
    // },
    // onShow: function() {
    //   //console.log('cruise Show')
    //   this.setdivport('initial-scale=1, minimum-scale=1, maximum-scale=2, user-scalable=yes, width=device-width')
    // },
    mounted() {
      // 登录会员本地缓存
      if (this.Cookies.getItem("userInfo")) {
      this.userInfo = JSON.parse(this.Cookies.getItem("userInfo"));
    }
    },
    onPageScroll(e) {
      console.infn("onPageScroll", e);
      //锚点切换
      //this.selectAnchor = e.scrollTop >= this.anchorlist[2].top ? 2 : e.scrollTop >= this.anchorlist[1].top ? 1:0;
      this.selectAnchor = 1
      //导航栏渐变
      let tmpY = 375
      e.scrollTop = e.scrollTop > tmpY ? 375 : e.scrollTop
      this.afterHeaderOpacity = e.scrollTop * (1 / tmpY)
      this.beforeHeaderOpacity = 1 - this.afterHeaderOpacity
      //切换层级
      this.beforeHeaderzIndex = e.scrollTop > 0 ? 10 : 11
      this.afterHeaderzIndex = e.scrollTop > 0 ? 11 : 10
    },
    methods: {
      initData() {
        var that = this
        // that.wxOauth().then(data => {

        // }).catch(err => {
        //   console.info('wxOauth -- catch ---' + err)
        // }).finally(function() {
        //   that.readDetail()
        // })

        that.getGoodsDetail()
      },
      // 跳转首页或产品页面
      target(url){
        this.$router.push({path: url})
      },
      // 点击规格
      targetClickSku (val) {
        this.getGoodsDetail(val);
      },
      /**
       * 从地址栏获取id, 如果有就读取
       */
      getGoodsDetail() {
        this.isLoading = true;

        let me = this
        let params = {}
        let member = this.userInfo

        var id = common.getQueryString('goodsId') || ''
        //测试
        if (process.env.NODE_ENV === 'development' && !id) {
          //id = 'f0ca431a74b80c2e0174ba5fb9250096'
        }

        //console.info('getGoodsDetail@@ cruise ----------- id = ' + id + ", openid = " + member.openid)
        params.id = id
        params.openid = member.openid || ''
        params.state = member.disabled || ''

        goodsCruise(params).then(res => {
          this.isLoading = false;
          if (res.success) {
            this.$set(this, "goodsMsg", res);
            this.loading = false
          } else {
            console.log('未查询到数据')
          }
        }).catch(e => {
          console.log('/weixin/cruise 请求错误', e)
        }).finally(function() {
          //common.updateUrl();
          //me.readTravelAgency()
          //me.wxshare()
        })
      },

    },
  }
</script>
<style scoped lang="scss">
@import '~@/assets/font/symbol/iconfont.css';
@import '~@/assets/font/iconfont0/iconfont.css';
@import '~@/assets/font/iconfont/iconfont.css';
@import '~@/components/cruise/css/detail.css';
@import '~@/components/cruise/css/core.css';
.shop-item-path {
  height: 38px;
  @include background_color($light_background_color);
  line-height: 38px;
  color: #2c2c2c;
}

.shop-nav-container {
  width: 1200px;
  margin: 0 auto;
  position: relative;

  .store-collect {
    position: absolute;
    right: 20px;
    top: 0;
    color: #999;

    span {
      &:hover {
        cursor: pointer;
        color: $theme_color;
      }
    }
  }
}
.sale-btn{
  margin:10px 0

}


.parent {
  width: 200px;
  height: 100px;
  overflow: auto; /* 或者使用 'hidden', 'scroll', 'auto' 来测试不同的效果 */
}
 
.child {
  width: 100%;
  height: 150px; /* 故意设置高度超出父元素 */
}
</style>